<style lang='sass'>
  @import './ecstyle.scss'
</style>
<template>
  <div class="ec-home" :style="{minHeight: height + 'px'}">
    <el-main :class="classTheme" style="padding: 0px;">
      <!-- 企业banner，包含logo，企业名称，企业资质 -->
      <div class="banner-logo">
        <div class="ec-logo">
          <img :src="ec.enterpriseLogo" class="img-responsive" alt="" @click="$showImg(ec.enterpriseLogo)">
          <!-- <div class="zoomImage" :style="{backgroundImage: 'url(' + ec.enterpriseLogo + ')'}"></div> -->
        </div>
        <p class="ec-ename">{{ec.enterpriseName}}</p>
        <p class="ec-equalification"><strong>企业资质：{{getEQ(ec.enterpriseQualification)}}</strong></p>
      </div>
      <!-- 企业标签 -->
      <div class="ec-tags">
        <label v-if="ec.tags.length > 0"><strong>企业标签:</strong>&nbsp;&nbsp;</label>
        <span :key="tag.tagId"
        v-for="tag in ec.tags">{{tag.tagName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
      <!-- 企业简介 -->
      <div class="ec-profile">
        <h2>企业简介</h2>
        <p v-html="replaceEnter(ec.enterpriseSummary)"></p>
      </div>

      <!-- 企业联系方式 -->
      <div class="ec-contact">
        <h2>联系我们</h2>
        <div class="">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="ec-contact-card">
                <label>联系人</label>
                <p>{{ec.enterpriseContacts}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="ec-contact-card">
                <label>联系方式</label>
                <p>{{ec.enterpriseContactsPhone}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="ec-contact-card">
                <label>企业邮箱</label>
                <p>{{ec.email}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="ec-contact-card">
                <label>企业地址</label>
                <p>{{ec.cityName}}</p>
                <p>{{ec.enterpriseAddress}}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="ec-home-content">
        <!-- 产品展示 -->
        <div class="ex-common-class echome-pd" v-if="ec.mscsProductDisplayList.length > 0" style="padding: 10px 0 60px 0;margin-top: 60px;">
          <h2>产品展示</h2>
          <div class="flex-row" v-for="(item, index) in ec.mscsProductDisplayList" :key="index" style="margin-top: 50px;">
            <!-- <img :src="item.image" class="img-responsive" alt=""> -->
            <div class="echome-content-img" style="width: 300px;height: 200px;">
              <!-- <div class="zoomImage" :style="{backgroundImage: 'url(' + item.image + ')'}"></div> -->
              <div class="zoomImage-66" v-lazy:background-image="item.image" @click="$showImg(item.image)"></div>
              <!-- <img :src="item.image" class="img-responsive" alt=""> -->
            </div>

            <div class="flex-all" style="margin-left: 50px;margin-right: -30px;">
              <p>{{item.title}}</p>
              <p v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>

        <!-- 专家 -->
        <div class="ex-common-class echome-en" v-if="ec.mscsEnterpriseExpertList.length > 0" style="padding: 10px 0 60px 0;margin-top: 60px;">
          <h2>企业专家</h2>
          <div class="flex-row" style="justify-content: center;flex-wrap: wrap;">
            <div class="flex" v-for="(item, index) in ec.mscsEnterpriseExpertList" :key="index">
              <div class="echome-content-img" style="width: 250px;height: 250px;">
                <!-- <div class="zoomImage" :style="{backgroundImage: 'url(' + item.image + ')'}"></div> -->
                <div class="zoomImage" v-lazy:background-image="item.image" @click="$showImg(item.image)"></div>
                <!-- <img :src="item.image" class="img-responsive" alt=""> -->
              </div>
              <!-- <img :src="item.image" alt=""> -->
              <p>{{item.expertName}}</p>
              <p v-html="replaceEnter(item.introduce)"></p>
            </div>
          </div>
        </div>

        <!-- 优质案例 -->
        <div class="ex-common-class echome-mbc" v-if="ec.mscsBusinessCasesList.length > 0" style="padding: 10px 0 60px 0;margin-top: 60px;">
          <h2>优质案例</h2>
          <div class="flex-row" v-for="(item, index) in ec.mscsBusinessCasesList" :key="index" style="margin-top: 50px;">
            <div class="flex-all">
              <p>{{item.title}}</p>
              <p v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>

        <!-- 解决方案 -->
        <div class="ex-common-class echome-msp" v-if="ec.mscsSolutionProgramList.length > 0" style="padding: 10px 0 60px 0;margin-top: 60px;">
          <h2>解决方案</h2>
          <div class="flex-row" v-for="(item, index) in ec.mscsSolutionProgramList" :key="index" style="margin-top: 50px;">
            <div class="flex-all">
                <p>{{item.title}}</p>
                <p v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>

        <!-- 企业荣誉 -->
        <div class="ex-common-class echome-hn" v-if="ec.mscsEnterpriseHonorList.length > 0" style="padding: 10px 0 60px 0;margin-top: 60px;">
          <h2>企业荣誉</h2>
          <div class="flex-row" style="justify-content: center;flex-wrap: wrap;">
            <div class="flex" id="eh-expert" v-for="(item, index) in ec.mscsEnterpriseHonorList" :key="index">
              <div class="echome-content-img" style="width: 200px;height: 140px;">
                <!-- <div class="zoomImage" :style="{backgroundImage: 'url(' + item.image + ')'}"></div> -->
                <div class="zoomImage-70" v-lazy:background-image="item.image" @click="$showImg(item.image)"></div>
                <!-- <img :src="item.image" class="img-responsive" alt=""> -->
              </div>

                <p>{{item.honorName}}</p>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <back-top></back-top>
  </div>
</template>

<script>

export default {
  title: '企业主页预览',
  name: 'ecpriview',
  data () {
    return {
      ec: {
        data: {},
        like: '0',
        likeNumber: 0,
        comment: {},
        tags: [],
        mscsProductDisplayList: [],
        mscsEnterpriseExpertList: [],
        mscsEnterpriseHonorList: [],
        mscsSolutionProgramList: [],
        mscsBusinessCasesList: []
      }
    }
  },
  methods: {
    getEQ (str) {
      let eq = ''
      switch (str) {
        case 'A':
          eq = '甲级'
          break;
        case 'B':
          eq = '乙级'
          break;
        case 'C':
          eq = '丙级'
          break;
        case 'D':
          eq = '丁级'
          break;
        case 'N':
          eq = '非资质单位'
          break;
      }
      return eq
    },
    replaceEnter (str) {
      if (str) {
        return str.replace(/\n|\r\n/g,"<br/>")
      }
      return ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      let obj = Object.assign({}, localStorage.eccontent ? JSON.parse(localStorage.eccontent) : {})
        obj.tags = JSON.parse(obj.tags)
        obj.mscsProductDisplayList = JSON.parse(obj.mscsProductDisplayList)
        obj.mscsEnterpriseExpertList = JSON.parse(obj.mscsEnterpriseExpertList)
        obj.mscsEnterpriseHonorList = JSON.parse(obj.mscsEnterpriseHonorList)
        obj.mscsSolutionProgramList = JSON.parse(obj.mscsSolutionProgramList)
        obj.mscsBusinessCasesList = JSON.parse(obj.mscsBusinessCasesList)
        vm.ec = Object.assign({}, obj)
    })
  },
  computed: {
    classTheme () {
      let index = parseInt(this.ec.theme)
      if (index === 0) {
        return 'light-green-ec'
      } else if (index === 1) {
        return 'blue-ec'
      } else if (index === 2) {
        return 'dark-green-ec'
      } else if (index === 3) {
        return 'default-ec'
      }
      return 'light-green-ec'
    },
    height () {
      return this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
    },
    isVip () {
      return this.$store.state.user.user &&
      (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER') &&
      this.$store.state.user.user.memberStatus === "NORMAL" &&
      this.$store.state.user.user.paymentStatus === "ALREADY"
    },
    isLogin () {
      return this.$store.state.user.isLogin
    }
  }
}
</script>
